

<div class="re-main">
    <div class="re-page">
        <div class="re-col">
            <div class="col-main">
                <div class="re-center">
                    <h1 class="re-title">注册</h1>
                    <p class="p-re">
                        <span class="sp1-re">如您已是Dior美妆店铺会员，请使用会员手机号码注册，系统将自动绑定您的官网帐号并合并您在官网和店铺的Dior美妆购物积分。</span>
                        <span class="sp2-re">*为必填项目</span>
                    </p>
                    <div class="re-inside">
                        <div class="re-left">
                            <div class="re-block">
                                <form action="javascript:void(0)" >
                                    <ul class="ul-login">
                                        <li class="li-name">
                                            <p class="p-name">用户名</p>
                                            <div class="login-in">
                                                <input type="text" id="username" class="name" placeholder="手机号 / 邮箱">
                                                <p class="log" >该用户名已被注册</p>
                                            </div>
                                        </li>
                                        <li class="li-name">
                                            <p class="p-name">密码</p>
                                            <div class="login-in"><input type="text" id="password" class="name" placeholder="密码"></div>
                                        </li>
                                        <li class="li-check">
                                            <div class="check-block">
                                                <p href="" class="sign">
                                                    <span class="sign-ch"></span>
                                                </p>
                                                <p class="agree">我已阅读并接受<span class="sp-agree">个人信息收集声明</span>以及<span class="sp-agree">网站使用和销售条款</span></p>
                                            </div>
                                        </li>
                                        <li class="li-login">
                                            <a class="btn" id="register">注册</a>
                                        </li>
                                    </ul>
                                </form>
                            </div>
                        </div>

                        <div class="re-right">
                            <div class="box-right">
                                <p class="right-top">已有帐号</p>
                                
                            </div>
                            <div class="create">
                                <a class="a-create" href="./login.html"><span class="span-create">立即登录</span></a>
                            </div> 
                        </div>

                    </div>




                </div>
            </div>
        </div>
    </div>
</div>

<script>
    //  同意协议按钮
    $(function(){
        $(".sign-ch").click(function(){
            if(!$(this).hasClass("box")){
                $(this).addClass("box")
            }else{
                $(this).removeClass("box");
            }
        })
    })
</script>

<script>

        $( function(){
            $("#register").click( function(){
                var dormitory = $(".name").val();	//获取input框内的值
            if (dormitory == null || dormitory == "") {
                alert("请填写信息");	//如果值为空，提示用户填写
                return;
            }
                $.ajax({
                    url : "http://localhost/server/register.php",
                    data : {
                        username : $("#username").val(),
                        password : $("#password").val()
                    },
                })
                .then( function( res ){
                    var data = JSON.parse(res );
                    if( data.type === "success"){
                        alert("注册成功,点击确定1秒后跳转到登陆页面")
                         setTimeout(function(){
                        window.location.href="login.html" 
                    } , 1000)
                    }else{
                        $(".log").css({
                            display : "block"
                        })
                    }
                })
            })
        })
</script>
